/**
 * Created by imac13 on 19/1/5.
 */
import React,{ Component } from 'react';
import { Card,Icon,Spin,Alert } from 'antd';
import './../ui.less'

class Loadings extends Component {

    render(){
        const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;
        const icon = <Icon type="loading" />;
        return(
            <div>
                <Card title="Spin用法" className="card-wrapper">
                    <Spin size="small"/>
                    <Spin style={{margin:'0 20px'}}/>
                    <Spin size="large" style={{margin:'0 20px'}}/>
                    <Spin indicator={antIcon}/>
                    <Spin indicator={icon} style={{margin:'0 20px'}}/>
                </Card>
                <Card title="内容遮罩" className="card-wrapper">
                    <Spin>
                        <Alert
                            message="React"
                            description="欢迎来到ofo小黄车后台管理系统的练习."
                            type="info"
                        />
                    </Spin>
                    <Spin>
                        <Alert style={{margin:'20px 0'}}
                            message="Alert message title"
                            description="Further details about the context of this alert."
                            type="warning"
                        />
                    </Spin>
                    <Spin tip="Loading...">
                        <Alert style={{margin:'20px 0'}}
                            message="Alert message title"
                            description="Further details about the context of this alert."
                            type="success"
                        />
                    </Spin>
                    <Spin indicator={icon} tip="正在玩命加载中...">
                        <Alert
                            message="react"
                            description="Further details about the context of this alert."
                            type="error"
                        />
                    </Spin>
                </Card>
            </div>
        )
    }
}

export default Loadings;